<style>
.k-grid td {
    white-space: nowrap;
    overflow: hidden;
}
 
.k-grid table {
    table-layout: fixed;
}

.k-edit-form-container
{
	text-align:center;
	width:100%;
}
</style>
<script type="text/javascript" src="/js/app/statisticSite.js"></script>

<script>   
    var grid = null;
	
    $(document).ready(function() {
        $("#_planTime").kendoComboBox();        
        $("#_monitor").kendoComboBox();
        $("#_adv").kendoComboBox();
        $("#_payment").kendoComboBox();
        $("#_feature").kendoComboBox();
        
        $("#_startDate").kendoDatePicker({            
            format: "yyyy-MM-dd"
        });
        
        $("#_endDate").kendoDatePicker({            
            format: "yyyy-MM-dd"
        });
        
		
        grid = new StatisticSite.Grid("grid");		
		
        $("#tabstrip").kendoTabStrip();
    });
    
    function btnSearchClick()
    {
        grid.refresh();
    } 
	
</script>

<div id="frmSearch" class="form" style="width:700px;">
    <dl>         
        <dt class="first"><label for="_domain">Domain: </label></dt>
        <dd class="first"><input type="text" class="k-textbox" id="_domain" style="width:150px;"/></dd>

        <dt class="second">Plan time: </dt>
        <dd class="second">
            <select id="_planTime" style="width:150px;">
                <option value="" selected="selected">All</option>
                <option value="One day">One day</option>
                <option value="Short time">Short time ( 2 -> 20 days)</option>
                <option value="Medium">Medium (21 -> 60 days)</option>
                <option value="Long time">Long time ( > 61 days)</option>
            </select>
        </dd>		    
        <dt class="first">Monitor: </dt>
        <dd class="first">
            <select id="_monitor" style="width:150px;">
                <option value="" selected="selected">All</option>
                <option value="Trial">Trial</option>
                <option value="General">General</option>
                <option value="Trusted">Trusted</option>
            </select>
        </dd>
        <dt class="second">Adv: </dt>
        <dd class="second">
            <select id="_adv" style="width:150px;">
                <option value="" selected="selected">All</option>
                <option value="Low">Low (< 3 sites)</option>
                <option value="Medium">Medium (3 -> 10 site)</option>
                <option value="High">High (> 10 sites)</option>
            </select>
        </dd>
        <dt class="first">Payment: </dt>
        <dd class="first">
            <select id="_payment" style="width:150px;">
                <option value="" selected="selected">All</option>
                <option value="Low">Low (LR, PM)</option>
                <option value="Medium">Medium (4)</option>
                <option value="High">High (> 4)</option>
            </select>
        </dd>
        <dt class="second">Feature: </dt>
        <dd class="second">
            <select id="_feature" style="width:150px;">
                <option value="" selected="selected">All</option>
                <option value="Low">Low (No SSL Or have many domain / server)</option>
                <option value="Medium">Medium (SSL, delicated Server)</option>
                <option value="High">High (Good design, SSL, DDOS, Delicated Server)</option>
            </select>
        </dd>	
        <dt class="first">Start date: </dt>
        <dd class="first">
            <input id="_startDate" name="startDate" data-bind="value:startDate" data-role="datepicker" data-format="dd/MM/yyyy" style="width:150px;" />
        </dd>
        <dt class="second">End date: </dt>
        <dd class="second">
            <input id="_endDate" name="endDate" data-bind="value:endDate" data-role="datepicker" data-format="dd/MM/yyyy" style="width:150px;" />
        </dd>	
    </dl>
    <div style="text-align:center;">
        <button class="k-button long" onclick="btnSearchClick();">Search</button>
    </div>
</div>	
<div id="grid" style="height:600px;"></div>
